<template>
	<view class="content">
		<!--f1:两个下拉菜单/数据拾取器-->
		<view>
			<!--第一个数据拾取器:缴费类型-->
			<!--mode 选择器类型: 普通 多列 日期 时间 省市-->
			<!--range 选择器的选项: 配一个数组，只有普通 多列 两种选择器可以配置-->
			<picker class="picker" mode="selector" :range="feeTypes" 
				@change="doFeeTypeChange">
				<view class="picker-content">
					<text class="txt">{{curFeeType < 0 ? "选择类型" : feeTypes[curFeeType]}}</text>
					<uni-icons type="bottom"></uni-icons>
				</view>
			</picker>
			<!--第二个数据拾取器：缴费月份-->
			<!--mode 配置为 date,则为日期选择器-->
			<!--fields 控制日期选择器的粒度, day month year-->
			<picker class="picker" mode="date" fields="month"
				@change="doMonthChange">
				<view class="picker-content">
					<text class="txt">{{curMonth}}</text>
					<uni-icons type="bottom"></uni-icons>
				</view>
			</picker>
		</view>
		<!--f2: 缴费记录/卡片-->
		<!--title: 标题-->
		<!--thumbnail: 缩略图-->
		<!--extra: 标题中的额外信息-->
		<uni-card v-for="record in records" :key="record.fid"
			class="record" padding="0"
			:title="record.type | feeTypeName" 
			:thumbnail="record.type | feeTypeIcon" 
			:extra="`￥${record.amount.toFixed(2)}`" >
			<uni-list class="recode-content">
				<uni-list-item title="缴费状态" rightText="交易成功"></uni-list-item>
				<uni-list-item title="缴费用户" :rightText="record.householdName"></uni-list-item>
				<uni-list-item title="缴费时间" :rightText="record.paidTime | dateToStr"></uni-list-item>
			</uni-list>
		</uni-card>
		
	</view>
</template>

<script>
	import {feeRecord} from "@/service/index.js"
	export default {
		data() {
			return {
				curFeeType:-1,
				curMonth:'选择月份',
				feeTypes:['全部类型','水费','电费','燃气费','物业','停车','宽带'],
				records:[]
			}
		},
		onLoad() {
			//用户新进入，查询数据
			this.requestFeeRecord();
		},
		methods: {
			//处理"缴费类型"拾取器发生改变的事件
			doFeeTypeChange(e){//e.detal.value ->  1
				this.curFeeType = e.detail.value;
				this.requestFeeRecord();
			},
			//处理"缴费月份"拾取器发生改变的事件
			doMonthChange(e){ //e.detal.value ->  2023-03
				this.curMonth = e.detail.value
				this.requestFeeRecord();
			},
			//获取缴费记录 - 刚进入页面时  用户修改类型时  用户修改时间时
			async requestFeeRecord(){
				let type = this.curFeeType;
				let startTime = 0;
				let endTime = 0;
				
				let arr = this.curMonth.split("-");
				if(arr.length == 2){//选择了时间 需要将时间转换为月的起始和结束毫秒值
					startTime = new Date(this.curMonth).getTime() - 1000 * 60 * 60 * 8;
					endTime = new Date(arr[0],arr[1]).getTime() - 1;
				}
				
				let data = await feeRecord(type,startTime,endTime);
				this.records = data;
			}
		}
	}
</script>

<style scoped lang="scss">
	.picker{
		display: inline-block;
		width: $uni-font-size-base * 10;
		.picker-content{
			background-color: $uni-bg-color;
			align-items: center;
			border: $uni-border;
			border-radius: $uni-border-radius-base;
			margin: $uni-spacing-col-lg;
			padding: $uni-spacing-col-sm;
			.txt{
				flex:1;
				text-align: center;
			}
		}
	}
	
	.record{
		flex-direction: column;
		::v-deep .uni-card__content{
			display: block;
		}
		.record-content{
			width:100%;
		}
	}
</style>
